<template>
    <div class="province_img">
      <div @mouseenter="enter" @mouseleave="leave" style="position: absolute; top: 0; z-index: 99;">
        <div v-if="display" style="position: fixed; top: 140px;">
          <left-top :active="1" :interval="interval"></left-top>
        </div>
        <div v-if="!display" style="margin-top: 140px;">
          <img src="/static/assets/img/leftline.png" alt="" style="height: 760px; width: 28px;">
        </div>
      </div>
       <div class="target_ranking">
         <ul>
           <li>
             <p>昆山市第三人民医院</p>
             <p class="tr big_size">2017-09-15 18:49 登录系统</p>
           </li>
           <li>
             <p>南京市中心医院</p>
             <p class="tr big_size">2018-01-20 08:49 登录系统</p>
           </li>
           <li>
             <p>昆山市中医医院</p>
             <p class="tr big_size">2017-05-28 11:49 登录系统</p>
           </li>
           <li>
             <p>苏州市立医院</p>
             <p class="tr big_size">2018-09-20 13:49 登录系统</p>
           </li>
           <li>
             <p>苏州金阊医院</p>
             <p class="tr big_size">2017-5-05 15:49 登录系统</p>
           </li>
           <li>
             <p>常熟市支塘人民医院</p>
             <p class="tr big_size">2017-05-21 17:49 登录系统</p>
           </li>
           <li>
             <p>东南大学附属中大医院</p>
             <p class="tr big_size">2018-02-09 13:49 登录系统</p>
           </li>
           <li>
             <p>南京市浦口区中医医院</p>
             <p class="tr big_size">2018-09-20 12:49 登录系统</p>
           </li>
           <li>
             <p>无锡市第二中医医院</p>
             <p class="tr big_size">2018-03-19 16:49 登录系统</p>
           </li>
           <li>
             <p>常熟市辛庄中心卫生院</p>
             <p class="tr big_size">2018-06-16 22:49 登录系统</p>
           </li>
           <li>
             <p>盐城市中医院</p>
             <p class="tr big_size">2018-08-20 15:49 登录系统</p>
           </li>
         </ul>
       </div>
    </div>
</template>

<script>
import LeftTop from '@/components/Left'
export default {
  data () {
    return {
      interval: null,
      display: true,
      ti: 0,
      deg: 360
    }
  },
  components: {
    LeftTop
  },
  mounted: function () {
    this.$nextTick(function () {
      setTimeout(this.timer, 3000)
    })

    interval = setInterval(this.transformRotate, 500)
  },
  beforeDestory () {
    clearInterval(this.interval)
  },
  methods: {
    timer: function () {
      this.display = false
    },
    enter: function () {
      this.display = true
    },
    leave: function () {
      this.display = false
    },
    transformRotate: function () {
      $('.target_ranking li').eq(this.ti).css('transform', 'rotateX('+ this.deg + 'deg)')
      $('.target_ranking li').eq(this.ti).css('transition', 'all 1s ease-out')
      if(this.ti >= $('.target_ranking li').length + 5){
        this.ti = 0
        this.deg = this.deg == 360 ? 0 : 360
      } else {
        this.ti ++
      }
    }
  }
}
</script>

<style scoped>
.province_img{
  width: 100%;
  position: fixed;
  min-height: 600px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(../../static/assets/img/province.png) no-repeat center center;
  background-size:cover;
  background-attachment: fixed;
}
.target_ranking{
  display: inline-block;
  margin-top: 11%;
  margin-left: 3%;
  font-size: 18px;
  width: 16%;
}
.target_ranking p{
  background-image: linear-gradient(to right, #44A6F3, #820EE0,#820EE0);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  /*animation: bgp 5s infinite linear;*/
}
.target_ranking ul li{
  border-bottom: 1px dashed #243A8C;
  padding-bottom: 10px;
  padding-top: 10px;
}
</style>
